<div class="service-config">
    <div class="panel panel-default">
        <div class="panel-heading">
            基础配置
        </div>
        <div class="panel-body" style="padding: 30px 40px;">
            <div class="row">
                <div class="col-md-2" style="padding-top: 8px;">
                    <h3 class="require">服务名称</h3>
                </div>
                <div class="col-md-10">
                    <input type="text" name="serviceName" ng-model="dc.metadata.name"
                           class="form-control input-block foucsinput"
                           placeholder="例如:datafoundry" required>
                    <small ng-show="frm.serviceName.$dirty && grid.rexnameerr" class="fa fa-info-circle err-tip">&nbsp;请输入小写英文字母</small>
                    <small ng-show="frm.serviceName.$dirty && grid.createdcerr" class="fa fa-info-circle err-tip">&nbsp;服务名称不合法</small>
                    <small ng-show="grid.servicenameerr" class="fa fa-info-circle err-tip">&nbsp;服务名称错误</small>
                </div>
            </div>
            <hr>

            <div class="row">
                <div class="col-md-2" style="padding-top: 8px;">
                    <h3>POD配置</h3>
                </div>
                <div class="col-md-10 continerboxs">
                    <a href="javascript:;" style="line-height: 40px; margin-bottom: 10px" class="href-add"
                       ng-click="addContainer()">
                        <i class="fa fa-plus-circle fa-lg"></i>&nbsp;&nbsp;<span style="font-size: 12px">创建容器</span>
                    </a>
                    <br>
                    <small ng-show="invalid.containerLength" class="fa fa-info-circle err-tip">您至少需要设置一个容器</small>
                    <div ng-repeat="container in dc.spec.template.spec.containers" ng-init="outerIndex = $index"
                         style="border:1px solid #c9c9c9;border-radius:2px;margin-bottom: 15px; margin-top: 10px"; class="containerval">
                        <div class="container-fluid container-bar" style="border: none;background: #f7f8fb;">
                            <div class="row">
                                <div class="col-sm-6">
                                    设置容器
                                </div>
                                <div class="col-sm-6 text-right">
                                    <a class="fa fa-times-circle fa-lg" ng-click="rmContainer($index)"
                                       style="text-decoration: none;color: #9fa7b7;" href="javascript:;"></a>
                                </div>
                            </div>
                        </div>
                        <div class="container-box" style="margin-bottom: 0;">
                            <div style="margin-bottom: 20px;">
                                <input ng-model="container.name"
                                       style="width: 95%;display: inline-block;"
                                       type="text" class="form-control foucsinput"
                                       placeholder="例如:datafountry">
                                <span class="require"></span>
                                <small ng-show="!container.name && container.emptyName"
                                       class="fa fa-info-circle err-tip">&nbsp;请设置容器名,至少2个字符
                                </small>
                            </div>
                            <hr>
                            <div style="margin-bottom: 20px;">
                                <a href="javascript:;" class="btn btn-orange"
                                   ng-click="selectImage($index)" style="color: white">选择镜像</a><span
                                    class="require"></span>
                                <br>
                                <small ng-if="!container.image && container.emptyImage"
                                       class="fa fa-info-circle err-tip">&nbsp;请选择镜像
                                </small>
                            </div>
                            <div style="font-size: 12px;color: #5a6378;">
                                <div ng-if="container.image">
                                    <p style="margin-bottom: 5px;">
                                        镜像:&nbsp;&nbsp;{{container.image | imageStreamName}}</p>
                                    <p style="margin-bottom: 20px;">
                                        Tag:&nbsp;&nbsp;{{container.tag}}
                                    </p>
                                </div>
                                <hr>
                                <div>
                                    <label ng-if="container.isshow" ng-class="{'active': container.isimageChange}"
                                           ng-click="container.isimageChange=!container.isimageChange"
                                           style="cursor: pointer;">
                                        <i class="faa faa-check"></i>
                                        &nbsp;&nbsp;镜像变化触发自动部署
                                    </label>
                                    <label ng-if="!container.isshow" style="cursor: pointer;color: #cccccc;">
                                        <i class="faa faa-check"></i>
                                        &nbsp;&nbsp;镜像变化触发自动部署
                                    </label>
                                </div>

                                <!--添加卷-->
                                <hr>
                                <div>
                                    <a href="javascript:;" style="font-size: 14px;" class="href-add"
                                       ng-click="addVolume($index)">
                                        <i class="fa fa-plus-circle fa-lg"></i>&nbsp;&nbsp;添加卷
                                    </a>
                                    <div>
                                    </div>
                                </div>
                                <div style="margin-top:20px;">
                                    <table class="table table-bordered" border="0" cellpadding="0" cellspacing="0"
                                           style="border:0px;border-top:1px solid #ddd">
                                        <tr ng-if="container.secretsobj.secretarr.length">
                                            <td class="col-md-2"
                                                style="padding:0; border: 1px solid #ddd;text-align: center;vertical-align: middle;background: #f7f8fb;">
                                                密钥
                                            </td>
                                            <td class="col-md-10" style="padding:0;border: 0px;" border="0">
                                                <div ng-repeat="secretarr in container.secretsobj.secretarr">
                                                    <div style="border-bottom: 1px solid #ddd;height: 30px;line-height: 30px;border-right:1px solid #ddd ;padding-left:15px;">
                                                        {{secretarr.secret.secretName}}
                                                    </div>
                                                    <div style="height: 30px;line-height: 30px;border-bottom: 1px solid #ddd;border-right:1px solid #ddd ;padding-left:15px;">
                                                        {{secretarr.mountPath}}
                                                    </div>
                                                </div>

                                            </td>
                                        </tr>
                                        <tr ng-if="container.secretsobj.configmap.length">
                                            <td class="col-md-2"
                                                style="padding:0;  border: 1px solid #ddd;text-align: center;vertical-align: middle;background: #f7f8fb;">
                                                配置卷
                                            </td>
                                            <td class="col-md-10" style="padding:0;border: 0px;" border="0">
                                                <div ng-repeat="configmap in container.secretsobj.configmap">
                                                    <div style="border-bottom: 1px solid #ddd;height: 30px;border-right:1px solid #ddd ;line-height: 30px;padding-left:15px;">
                                                        {{configmap.configMap.name}}
                                                    </div>
                                                    <div style="height: 30px;line-height: 30px;border-bottom: 1px solid #ddd;border-right:1px solid #ddd ;padding-left:15px;">
                                                        {{configmap.mountPath}}
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr ng-if="container.secretsobj.persistentarr.length">
                                            <td class="col-md-2"
                                                style="padding:0; border: 1px solid #ddd; text-align: center;vertical-align: middle;background: #f7f8fb;">
                                                持久化卷
                                            </td>
                                            <td class="col-md-10" style="padding:0;border: 0px;" border="0">
                                                <div ng-repeat="persistentarr in container.secretsobj.persistentarr">
                                                    <div style="border-bottom: 1px solid #ddd;height: 30px;line-height: 30px;border-right:1px solid #ddd ;padding-left:15px;">
                                                        {{persistentarr.persistentVolumeClaim.claimName}}
                                                    </div>
                                                    <div style="height: 30px;line-height: 30px;border-bottom: 1px solid #ddd;border-right:1px solid #ddd ;padding-left:15px;">
                                                        {{persistentarr.mountPath}}
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    </table>
                                </div>
                                <div style="margin-top:20px;" class="row">
                                    <div class="col-md-2" style="padding-top: 5px">
                                        <h3>可用性探测</h3>
                                    </div>
                                    <div class="col-md-10">
                                        <c-checkbox checked="container.cando"></c-checkbox>
                                    </div>
                                    <div ng-if="container.cando" style="margin-top:20px;margin-bottom: 24px;" class="row">
                                        <div class="col-md-12 mt10">
                                            <div>
                                                <br/>
                                                <label style="font-size: 14px; font-weight: normal;">类型&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                                <br/>
                                                <div class="col-md-11" style="padding-top: 5px;padding-left:0px;">
                                                    <div class="dropdown dropdown-select" style="width: 100%;">
                                                        <span class="btn dropdown-toggle" data-toggle="dropdown" ng-blur="false" >
                                                            <span>{{container.doset}}</span>
                                                            <span class="caret"></span>
                                                        </span>
                                                        <ul class="dropdown-menu">
                                                            <li>
                                                                <a href="javascript:;"
                                                                   ng-click="container.doset = 'HTTP'">{{'HTTP'}}</a>
                                                            </li>
                                                            <li>
                                                                <a href="javascript:;"
                                                                   ng-click="container.doset = '命令'">{{'命令'}}</a>
                                                            </li>
                                                            <li>
                                                                <a href="javascript:;"
                                                                   ng-click="container.doset = 'TCP'">{{'TCP'}}</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <br>


                                            </div>
                                        </div>
                                        <div class="dohttp" ng-if="container.doset === 'HTTP'">
                                            <div class="col-md-12 mt10">
                                                <div>
                                                    <br/>
                                                    <label style="font-size: 14px; font-weight: normal;">路径&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                                    <br/>
                                                    <div class="col-md-11" style="padding-top: 5px;padding-left:0px;">
                                                        <input type="text" name="candopath"
                                                               class="form-control" style="font-size: 12px;"
                                                               ng-model="container.readinessProbe.httpGet.path"
                                                               required/>
                                                    </div>
                                                    <br>
                                                </div>
                                            </div>
                                            <div class="col-md-12 mt10">
                                                <div>
                                                    <br/>
                                                    <label style="font-size: 14px; font-weight: normal;">端口&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                                    <br/>
                                                    <div class="col-md-11" style="padding-top: 5px;padding-left:0px;">
                                                        <!--<input type="text" name="candoport"-->
                                                               <!--class="form-control" style="font-size: 12px;"-->
                                                               <!--ng-model="container.readinessProbe.httpGet.port"-->
                                                               <!--required-->
                                                               <!--placeholder="1"/>-->
                                                        <div class="dropdown dropdown-select" style="width: 100%;">
                                                            <button class="btn dropdown-toggle" data-toggle="dropdown">
                                                                <span>{{container.readinessProbe.httpGet.port || "请选择端口"}}</span>
                                                                <span class="caret"></span>
                                                            </button>
                                                            <ul class="dropdown-menu">
                                                                <li ng-repeat="port in portsArr">
                                                                    <a href="javascript:;" ng-click="container.readinessProbe.httpGet.port = port.containerPort">{{port.containerPort}}</a>
                                                                </li>
                                                            </ul>
                                                        </div>

                                                    </div>


                                                    <br>


                                                </div>
                                            </div>
                                        </div>
                                        <div class="dohttp" ng-if="container.doset === '命令'">
                                            <div class="col-md-12 mt10">
                                                <div class="commandwrop">
                                                    <br/>
                                                    <label style="font-size: 14px; font-weight: normal;">命令&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                                    <br/>
                                                    <div ng-repeat="com in container.readinessProbe.exec.command track by $index" ng-init="innerIndex = $index">
                                                        <div class="col-md-11" style="padding-top: 5px;padding-left:0px;">
                                                            <input type="text" name="comkey"
                                                                   class="form-control" style="font-size: 12px;"
                                                                   ng-model="com.key"
                                                                   required
                                                                   ng-keypress="($event.which === 13)?addcando(innerIndex,outerIndex):0"/>

                                                        </div>
                                                        <div class="col-md-1" style="height: 39px;line-height: 39px;">
                                                            <i style="cursor: pointer;" ng-click="innerIndex==0?addcando(innerIndex,outerIndex):deletecando(innerIndex,outerIndex)" ng-class="{'fa-plus-circle':$index===0,'fa-times-circle':$index>0}" class="fa fa-lg"></i>
                                                            <!--<i style="cursor: pointer;" ng-click="addordelete(innerIndex,outerIndex)" ng-class="{'fa-plus-circle':$index===0,'fa-times-circle':$index>0}" class="fa fa-lg"></i>-->
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="dohttp" ng-if="container.doset === 'TCP'">
                                            <div class="col-md-12 mt10">
                                                <div>
                                                    <br/>
                                                    <label style="font-size: 14px; font-weight: normal;">端口&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                                    <br/>
                                                    <div class="col-md-11" style="padding-top: 5px;padding-left:0px;">
                                                        <!--<input type="text" name="candotcp"-->
                                                               <!--class="form-control" style="font-size: 12px;"-->
                                                               <!--ng-model="container.readinessProbe.tcpSocket.port"-->
                                                               <!--required-->
                                                               <!--placeholder="1"/>-->
                                                        <div class="dropdown dropdown-select" style="width: 100%;">
                                                            <button class="btn dropdown-toggle" data-toggle="dropdown">
                                                                <span>{{container.readinessProbe.tcpSocket.port || "请选择端口"}}</span>
                                                                <span class="caret"></span>
                                                            </button>
                                                            <ul class="dropdown-menu">
                                                                <li ng-repeat="port in portsArr">
                                                                    <a href="javascript:;" ng-click="container.readinessProbe.tcpSocket.port = port.containerPort">{{port.containerPort}}</a>
                                                                </li>
                                                            </ul>
                                                        </div>

                                                    </div>
                                                    <br>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="col-md-12 mt10">
                                            <div>
                                                <br/>
                                                <label style="font-size: 14px; font-weight: normal;">初始延迟&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                                <br/>
                                                <div class="col-md-11" style="padding-top: 5px;padding-left:0px;">
                                                    <div class="dropdown dropdown-select"
                                                         style="width: 100%; border: 1px solid #ccc;">
                                                        <div class="input-group" style="width:100%">
                                                            <input onkeyup="value=value.replace(/[^\d]/g,'')" style="width: 95%;display: inline-block;border: none;font-size: 12px;height: 32px;"
                                                                   ng-model="container.readinessProbe.initialDelaySeconds"
                                                                   type="number" class="form-control">
                                                        <span class="input-group-btn"
                                                              style="width:5%;display: inline-block;">
                                                            <span style="line-height: 21px;width:100%;display: inline-block;padding: 6px 12px;color: black;border-color:#8c8c8c;height: 32px;font-size: 12px;">{{'秒'}}</span></span>
                                                        </div>
                                                        <!-- /input-group -->
                                                    </div>

                                                </div>


                                                <br>


                                            </div>
                                        </div>
                                        <div class="col-md-12 mt10">
                                            <div>
                                                <br/>
                                                <label style="font-size: 14px; font-weight: normal;">超时&nbsp;&nbsp;&nbsp;&nbsp;</label>
                                                <br/>
                                                <div class="col-md-11" style="padding-top: 5px;padding-left:0px;">
                                                    <div class="dropdown dropdown-select"
                                                         style="width: 100%; border: 1px solid #ccc;">
                                                        <div class="input-group" style="width:100%">
                                                            <input onkeyup="value=value.replace(/[^\d]/g,'')" style="width: 95%;display: inline-block;border: none;font-size: 12px;height: 32px;"
                                                                   ng-model="container.readinessProbe.timeoutSeconds"
                                                                   type="number" class="form-control"
                                                                   >
                                                        <span class="input-group-btn"
                                                              style="width:5%;display: inline-block;">
                                                            <span style="line-height: 21px;width:100%;display: inline-block;padding: 6px 12px;color: black;border-color:#8c8c8c;height: 32px;font-size: 12px;">{{'秒'}}</span></span>
                                                        </div>
                                                        <!-- /input-group -->
                                                    </div>

                                                </div>


                                                <br>


                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <hr>

            <div class="row">
                <div class="col-md-2" style="padding-top: 8px;">
                    <h3>端口开放</h3>
                </div>
                <div class="col-md-10">
                    <a ng-click="addprot()" class="href-add" style="line-height: 40px; margin-bottom: 10px"
                       href="javascript:;">
                        <i class="fa fa-plus-circle fa-lg"></i>&nbsp;&nbsp;<span style="font-size: 12px">添加端口</span>
                    </a>
                    <div class="table-responsive" ng-show="portsArr.length">
                        <table class="table table-hover table-default sub-table">

                            <tr>
                                <td style="vertical-align: middle;">
                                    <div class="row">
                                        <div class="col-sm-3">协议</div>
                                        <div class="col-sm-3">容器端口</div>
                                        <div class="col-sm-3">服务端口</div>
                                        <div class="col-sm-3"></div>
                                    </div>
                                    <div class="row" style="margin-top: 15px;" ng-repeat="port in portsArr">
                                        <div class="col-sm-3">
                                            <!--<input type="text" readonly class="input-small" ng-model="port.protocol">-->
                                            <select class="input-small" style="height:23px;" ng-model='port.protocol'>
                                                <option value='TCP'>TCP</option>
                                                <option value='UDP'>UDP</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-3">
                                            <input type="number" style="height:23px;" class="input-small" onkeyup="value=value.replace(/[^\d]/g,'')"
                                                   ng-class="{'input-error':port.conflict}"
                                                   ng-model="port.containerPort">
                                        </div>
                                        <div class="col-sm-3">
                                            <input type="number" style="height:23px;" onkeyup="value=value.replace(/[^\d]/g,'')"
                                                   ng-model="port.hostPort"
                                                   class="input-small"
                                                   ng-class="{'input-error':port.serviceConflict}">
                                        </div>
                                        <div class="col-sm-3">
                                            <a href="javascript:;" style='color: #9fa7b7;'
                                               ng-click="delprot($index)" class="fa fa-lg fa-times-circle"
                                            ></a>
                                        </div>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <small ng-show="grid.conflict" class="fa fa-info-circle err-tip">&nbsp;容器端口冲突,请修改</small>
                    <small ng-show="grid.serviceConflict" class="fa fa-info-circle err-tip">&nbsp;服务端口冲突,请修改</small>
                    <small ng-show="grid.servicepot" class="fa fa-info-circle err-tip">&nbsp;端口为空</small>
                    <small ng-show="grid.servicepoterr" class="fa fa-info-circle err-tip">&nbsp;端口填写错误</small>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $('input[ng-model="dc.metadata.name"]').focus();
</script>